<template>
    <div class="modal" v-if="visible">
      <div class="content" :style="{'width':width+'px'}">
        <div class="title">
        <span>{{ title }}</span>
        <span class="close" 
         @click="emits('update:visible',false);">&times;</span>
        </div>
        <div class="body">
          <slot></slot>
        </div>
      </div>
    </div>
</template>
<style scoped lang="scss">
/* npm i sass sass-loader -D */
.modal{
  position: fixed;
  left:0;
  top:0;
  right:0;
  bottom:0;
  background-color: rgba(0,0,0,.3);
  .content{
    width: 400px;
    height: 400px;
    background-color: #fff;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
  }
  .title{
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    background-color: #eee;
    display: flex;
    justify-content: space-between;
    span{
      cursor: pointer;
    }
    .close{
      color:red;
    }
  }
  .body{
    padding: 10px;
  }
}
</style>
<script setup>
import { inject} from 'vue'

defineProps({
    title: {
        type: String,
        required: true,
        default: '标题'
    },
    // 控制是否显示
    visible: {
        type: Boolean,
        required: true,
        default: false
    }
})
// 事件方送器
const emits = defineEmits(['update:visible',"change"])
// 接收父组件的width
const width = inject('width')
</script>